<script setup lang="ts">
defineOptions({
  name: "checkList"
});
import { ref, computed, ComputedRef } from "vue";
import { useRoute, useRouter } from "vue-router";
import sop from "./sop.vue";
import checkListTitle from "./checkListTitle.vue";
import checkListItem from "./checkListItem.vue";

const route = useRoute();
const router = useRouter();

interface Props {
  data: Array<Record<string, any>>;
  disabled?: boolean;
  onlyList?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  disabled: false,
  onlyList: false
});

const sopRef = ref<InstanceType<typeof sop> | null>(null);
const collapseValue = defineModel({ type: String, default: "" });
const checkListItemRef = ref<any>(null);

const margin = computed(() => {
  const {
    query: { type = "" }
  } = route;
  return type ? "none" : "16px";
});

const validate = async () => {
  if (!checkListItemRef.value) return null;
  for (const item of Array.from(checkListItemRef.value)) {
    await item?.validate();
  }
  return getParams();
};

const getParams = () => {
  if (!checkListItemRef.value) return null;
  let checkListParams = [];
  for (const item of Array.from(checkListItemRef.value)) {
    const p = item?.getParams();
    checkListParams.push(p);
  }
  return checkListParams[0];
};

defineExpose({
  validate,
  getParams
});
</script>

<template>
  <px-collapse v-if="data?.length" v-model="collapseValue" accordion>
    <px-collapse-item v-for="(item, index) in data" :key="item.title" :name="item.title">
      <template #title>
        <checkListTitle
          :title="item.title"
          :index="index + 1"
          :noIndex="!!route.query.type"
          :executor="item.executor"
          :collapse="collapseValue === item.title"
        />
      </template>
      <div class="collapse-content">
        <sop v-if="route.path.includes('add') || onlyList" ref="sopRef" :disabled="disabled" :data="item.data" />
        <checkListItem v-else ref="checkListItemRef" :disabled="disabled" :data="item" />
      </div>
    </px-collapse-item>
  </px-collapse>
  <px-empty v-else class="px-empty-common" :image-size="120" />
</template>

<style lang="scss" scoped>
.px-collapse {
  box-sizing: border-box;
  margin: v-bind(margin);
  overflow: hidden;
  border-right: 1px solid var(--px-collapse-border-color);
  border-left: 1px solid var(--px-collapse-border-color);
  border-radius: 4px;

  :deep(.px-collapse-item) {
    > div {
      padding: 0 16px;

      &:nth-child(1) {
        background-color: rgb(248 248 248);
        border-bottom: 1px solid var(--px-collapse-border-color);

        .px-collapse-item__header {
          background-color: rgb(248 248 248);
          border-bottom: none;
        }
      }

      &:nth-child(2) {
        padding: 16px;
      }
    }

    .px-collapse-item__content {
      padding-bottom: 0;

      .collapse-content {
        .collapse-content-form {
          .px-form-item {
            width: 100%;

            .px-form-item__content {
              .px-input {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>
